<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>To-Do List</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="app">
    <header class="app__header">
      <h1>待办事项</h1>
      <p class="subtitle">简单高效地管理你的任务</p>
    </header>

    <section class="new">
      <input id="new-input" class="new__input" type="text" placeholder="输入待办事项，按 Enter 添加" aria-label="新待办输入" />
      <button id="add-btn" class="btn btn--primary" aria-label="添加待办">添加</button>
    </section>

    <section class="toolbar" aria-label="工具栏">
      <div class="filters">
        <button class="btn btn--ghost is-active" data-filter="all">全部</button>
        <button class="btn btn--ghost" data-filter="active">未完成</button>
        <button class="btn btn--ghost" data-filter="completed">已完成</button>
      </div>
    </section>

    <section class="list" aria-label="待办列表">
      <ul id="todo-list" class="todo-list" role="list"></ul>
    </section>

    <footer class="footer">
      <div class="stats">
        <span id="count-all">总数: 0</span>
        <span id="count-active">未完成: 0</span>
        <span id="count-completed">已完成: 0</span>
      </div>
    </footer>
  </div>

  <script src="app.js"></script>
</body>
</html>